<!--
 * @Author: LiZhiWei
 * @Date: 2025-01-22 10:00:00
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2025-09-01 15:21:17
 * @Description: 通用表格组件，提取 Scaffold 组件的共性表格逻辑
-->
<template>
  <el-table
    ref="tableRef"
    v-loading="loading"
    :data="data"
    element-loading-text="Loading"
    fit
    stripe
    header-cell-class-name="list-table-th"
    highlight-current-row
    @selection-change="handleSelectionChange"
  >
    <!-- 多选框列 -->
    <el-table-column
      v-if="multiSelect"
      key="selection"
      align="center"
      fixed
      type="selection"
      width="50px"
    />

    <!-- 序号列 -->
    <el-table-column
      v-if="tableIndex"
      key="index"
      :align="multiSelect ? 'left' : 'center'"
      label="序号"
      fixed
      width="70px"
    >
      <template #default="scope">
        <span>{{ getIndexNumber(scope.$index) }}</span>
      </template>
    </el-table-column>

    <!-- 动态列 -->
    <el-table-column
      v-for="col in columns"
      :key="col.field"
      :align="col.align"
      :fixed="col.fixed"
      :label="col.label"
      :min-width="col.minWidth"
      :prop="col.field"
      :show-overflow-tooltip="col.tooltip ? col.tooltip : false"
      :width="col.width"
    >
      <template #default="scope">
        <!-- 自定义插槽 -->
        <slot
          v-if="col.type === 'slot'"
          :column="col"
          :name="`column_${col.field}`"
          :row="scope.row"
        >
          #column_{{ col.field }}="{ row, column }"
        </slot>

        <!-- 标签 -->
        <el-tag v-else-if="col.type === 'tag'">
          {{ scope.row[col.field] }}
        </el-tag>

        <!-- 图片 -->
        <Imager
          v-else-if="col.type === 'image'"
          :url="scope.row[col.field]"
          :width="50"
          model="square"
        />

        <!-- 操作列 -->
        <options
          v-else-if="col.type === 'options'"
          :id="col.key ? scope.row[col.key] : scope.row.id"
          :actions="actions"
          :index="scope.$index"
          :options="scope.row.options"
          @on-show="$emit('on-show', scope.row.id)"
          @on-edit="$emit('on-edit', scope.row.id, scope.$index)"
          @on-edit-page="$emit('on-edit-page', scope.row.id)"
          @on-del="$emit('on-del', scope.row.id)"
          @on-force-del="$emit('on-force-del', scope.row.id)"
          @on-restore="$emit('on-restore', scope.row.id)"
        >
          <template v-for="(_, name) in $slots" #[name]="slotData">
            <slot :name="name" :row="scope.row" v-bind="slotData"></slot>
          </template>
        </options>

        <!-- 字符串数组，用逗号拼接 -->
        <template v-else-if="Array.isArray(scope.row[col.field])">
          {{ scope.row[col.field].join(', ') }}
        </template>

        <!-- 人性化时间 -->
        <template v-else-if="col.field === 'updated_at' || col.field === 'deleted_at'">
          <list-timer :created="scope.row.created_at" :updated="scope.row[col.field]" />
        </template>

        <!-- 关联模型 -->
        <template v-else-if="col.related">
          {{
            col.key
              ? scope.row[col.related]
                ? scope.row[col.related][col.key]
                : ''
              : scope.row[col.related][col.field]
          }}
        </template>

        <!-- 默认显示 -->
        <template v-else>
          {{ scope.row[col.field] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'CommonTable',
  })

  const props = withDefaults(defineProps<Props>(), {
    data: () => [],
    columns: () => [],
    actions: () => ({}),
    loading: false,
    multiSelect: false,
    tableIndex: true,
    pageFormer: () => ({ page: 1, page_limit: 15, total: 0 }),
  })

  const emits = defineEmits<{
    (e: 'selection-change', selection: any[]): void
    (e: 'on-show', id: number | string): void
    (e: 'on-edit', id: number | string, index: number): void
    (e: 'on-edit-page', id: number | string): void
    (e: 'on-del', id: number | string): void
    (e: 'on-force-del', id: number | string): void
    (e: 'on-restore', id: number | string): void
  }>()

  interface Props {
    actions?: {
      add?: string
      del?: string
      delBatch?: string
      edit?: string
      forceDel?: string
      restore?: string
      trashed?: string
    }
    columns: any[]
    data: any[]
    loading?: boolean
    multiSelect?: boolean
    pageFormer?: {
      page: number
      page_limit: number
      total: number
    }
    tableIndex?: boolean
  }

  const tableRef = ref()

  // 计算序号
  const getIndexNumber = (index: number) => {
    if (props.pageFormer) {
      return index + 1 + (props.pageFormer.page - 1) * props.pageFormer.page_limit
    }
    return index + 1
  }

  // 处理选择变化
  const handleSelectionChange = (selection: any[]) => {
    emits('selection-change', selection)
  }

  // 暴露表格引用
  defineExpose({
    tableRef,
  })
</script>
